<template>
    <div :style="carStyle" ref="cardView" class="videoplay">
        <el-carousel trigger="click" :autoplay="false" style="height:100%;overflow:hidden;" indicator-position="none"
            @change="videoChange" ref="videCarousel">
            <el-carousel-item v-for="(item, i) in obj.videoList" :key="item.url"></el-carousel-item>
        </el-carousel>
        <video width="100%" height="100%" class="videplay" type="video/mp4" preload="" x-webkit-airplay="true"
            airplay="allow" webkit-playsinline="true" playsinline="true" controlslist="" x5-video-orientation="portraint"
            :autoplay="autoplayState" controls muted :loop="obj.videoList.length == 1" ref="media" id="media"
            style="position:absolute;top:0;"></video>

        <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl(obj)"></div>
    </div>
</template>

<script>
export default {
    Name: "VideoPlay",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
    },
    data() {
        return {
            carStyle: {},
            height: "",
            playIndex: 0,
        }
    },
    mounted() {
        this.setStyle();

        this.init();

        // this.$nextTick(() => {
        //     console.log(document.getElementById('media0'))
        //     document.getElementById('media0').addEventListener('ended', () => {
        //     }, false)
        // });
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.obj.contactType > 0) {
                if (this.obj.contactType == 1 && this.obj.boardId) {
                    return true;
                }
                if (this.obj.contactType == 2 && this.obj.url) {
                    return true;
                }
            }
            return false;
        },
        autoplayState() {
            if (this.obj.videoPlayType && this.obj.videoPlayType.length > 1) {
                return true;
            }
            if (this.obj.videoPlayType && this.obj.videoPlayType[0] == 1) {
                return true;
            }
            return false;
        }
    },
    methods: {
        init() {
            this.goDetail(this.obj.videoList[0].url);

            // 判断是否自动播放
            if (this.obj.videoPlayType.indexOf(1) > -1) {
                this.$refs.media.play();
            }
            // document.getElementById('media').src = this.obj.videoList[0].url;
            // document.getElementById('media').play();

            // if (this.obj.videoPlayType.length > 1) {
            //     setTimeout(function () {
            //         document.getElementById('media').play();
            //     }, 2000)
            // }
            if (this.obj.videoList.length > 1) {
                this.$refs.media.addEventListener('ended', () => {
                    // 判断是否循环播放
                    if (this.obj.videoPlayType && (this.obj.videoPlayType.length > 1 || this.obj.videoPlayType[0] == 2)) {
                        // 判断是否随机播放
                        if (this.obj.videoPlayGroup == 1) {
                            if (this.playIndex >= this.obj.videoList.length - 1) {
                                this.playIndex = 0;
                            } else {
                                this.playIndex++;
                            }
                        } else {
                            this.playIndex = Math.floor(Math.random() * this.obj.videoList.length);
                        }
                    }

                    this.goDetail(this.obj.videoList[this.playIndex].url);
                }, false)
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            this.height = this.$refs.cardView.offsetHeight + "px";
        },
        videoChange(nowIndx, parentIndex) {
            if (this.obj.videoPlayGroup && this.obj.videoPlayGroup == 2) {
                nowIndx = Math.floor(Math.random() * this.obj.videoList.length);
            }
            document.getElementById('media').src = this.obj.videoList[nowIndx].url;
        },
        goDetail(url) {
            this.$refs.media.src = url;
            // var id = url.split('=')[1];

            // axios({
            //     method: "GET",
            //     url: process.env.VUE_APP_FILE_GETPATH,
            //     params: { fileid: id },
            //     timeout: 10000,
            // }).then((res) => {
            //     this.$refs.media.src = res.data.data.path;
            // })
        },
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
                this.init();
            }
        }
    },
}
</script>

<style scoped>
.videoplay .el-carousel__item {
    height: 80%;
}

.videplay {
    object-fit: cover;
}
</style>